<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-card>
          <!-- 标题 -->
          <div slot="header">
            <span>新闻分类列表</span>
          </div>
          <!-- inline 表示单行表单 -->
          <el-form :inline="true" :model="searchForm">
            <el-form-item label="分类名称">
              <el-input
                v-model="searchForm.typeName"
                placeholder="请输入新闻分类名称"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="doSearch()">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <!-- 表格和分页部分 -->
    <el-row class="mt-10">
      <el-col :span="24">
        <el-card>
          <el-row>
            <el-col :span="24">
              <!-- 新增按钮 -->
              <el-button type="success" @click="handleDialog">新增</el-button>
              <!-- 批量删除 -->
              <el-button type="danger" @click="delBatch">批量删除</el-button>
            </el-col>
          </el-row>
          <!-- 定义表格，data 绑定的是列表数据，border 表示有边框 -->
          <!-- selection-change 事件表示用户勾选的状态改变 -->
          <el-table
            :data="pageData.data"
            border
            @selection-change="handleSelecteionChange"
            class="mt-10"
          >
            <!-- 定义表格列，type 表示列类型，selection 表示多选框 -->
            <el-table-column type="selection" width="55"></el-table-column>
            <!-- 定义表格列，prop 对应列内容的字段名， label 表示表头名称，width 可以控制度 -->
            <el-table-column
              prop="id"
              label="编号"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="typeName"
              label="分类名称"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="remark"
              label="分类描述"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column label="操作" width="300">
              <!-- 自定义列模板，可以添加按钮 -->
              <template slot-scope="scope">
                <el-button size="mini" @click="handleDialog(scope)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 完整功能的分页 -->
          <!-- size-change 事件表示用户修改了每页显示的数量 -->
          <!-- current-change 事件表示用户改变了当前页码 -->
          <!-- page-sizes 数组表示可下拉选择的每页显示数量 -->
          <el-pagination
            class="mt-10"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageData.pageNo"
            :page-sizes="[5, 10, 20, 50, 100]"
            :page-size="pageData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageData.totalCount"
          >
          </el-pagination>
        </el-card>
      </el-col>
    </el-row>

    <!-- 添加、修改对话框 -->
    <el-dialog
      :title="(dataForm.id == null ? '新增' : '编辑') + '新闻分类'"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="dataForm">
        <!--  如果是添加id不会赋值,调用后端接口默认为就是新增 -->
        <el-input
          type="hidden"
          v-model="dataForm.id"
          autocomplete="off"
        ></el-input>
        <el-form-item label="分类名称" :label-width="formLabelWidth">
          <el-input v-model="dataForm.typeName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分类描述" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            v-model="dataForm.remark"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="doAdd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import qs from "qs";
export default {
  created() {
    // 加载新闻列表数据
    this.loadNewsTypeList();
  },
  methods: {
    //初始化，进来页面加载该方法
    loadNewsTypeList() {
      //将searchForm里面的属性序列化,通过qs工具,最终的效果是typeName=XXX&pageSize=XXX&pageNo=XXX
      let queryStr = qs.stringify(this.searchForm);
      this.$axios
        .post("/api/admin/newsType?opr=page", queryStr)
        .then((response) => {
          this.pageData = response.data.data;
        });
    },

    //条件查询
    doSearch() {
      this.loadNewsTypeList();
    },
    //全选框选中事件
    handleSelecteionChange(val) {
      this.selectedIds = val.map((item) => item.id);
    },

    //添加提交触发事件
    doAdd() {
      //得到表单数据
      let queryStr = qs.stringify(this.dataForm);
      this.$axios.post("/api/admin/newsType?opr=save", queryStr).then((res) => {
        if (res.data.code === 0) {
          this.$message.success(res.data.msg);
          //添加完成之后需要关闭窗口
          this.dialogFormVisible = false;
          this.loadNewsTypeList();
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },

    //触发添加\修改事件
    handleDialog(scope) {
      this.dataForm.id = null;
      this.dataForm.typeName = "";
      this.dataForm.remark = "";

      this.dialogFormVisible = true;
      //通过id去调用后端接口获取数据
      this.$axios
        .get("/api/admin/newsType?opr=detail&id=" + scope.row.id)
        .then((res) => {
          console.log(res);
        });
      this.dataForm.id = scope.row.id;
      this.dataForm.typeName = scope.row.typeName;
      this.dataForm.remark = scope.row.remark;
    },

    //取消按钮
    handleCancel() {
      this.dataForm.id = null;
      this.dataForm.typeName = "";
      this.dataForm.remark = "";
      this.dialogFormVisible = false;
    },

    //根据id删除
    handleDelete(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .get("/api/admin/newsType?opr=del&id=" + id)
            .then((res) => {
              if (res.data.code === 0) {
                this.$message.success(res.data.msg);
                this.loadNewsTypeList();
              } else {
                this.$message.error(res.data.msg);
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //批量删除
    delBatch() {
      console.log("查看要删除选中的id:", this.selectedIds);
      if (this.selectedIds.length == 0) {
        this.$message("请选择数据");
        return;
      }
      //定义拼接参数的变量par
      let par = "";
      this.selectedIds.forEach((e) => {
        //参数拼成:ids=1&ids=2 格式
        par += "ids=" + e + "&";
      });
      //拼接要删除的id
      console.log("par" + par);
      this.$axios.post("/api/admin/newsType?opr=delBatch", par).then((res) => {
        console.log("res", res);
        if (res.data.code === 0) {
          this.$message.success(res.data.msg);
          //添加完成之后需要关闭窗口
          this.dialogFormVisible = false;
          this.loadNewsTypeList();
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },

    //每页显示几条
    handleSizeChange(pageNo) {
      //得到pageNo之后想办法调用分页的接口(分页接口参数应该是封装好的一个对象)
      this.searchForm.pageSize = pageNo;
      this.loadNewsTypeList();
    },

    //显示第几页的数据
    handleCurrentChange(pageNo) {
      this.searchForm.pageNo = pageNo;
      this.loadNewsTypeList();
    },
  },

  data() {
    return {
      // 根据接口信息定义好查询条件
      searchForm: {
        typeName: "",
        // 一页数量
        pageSize: 5,
        // 当前页码
        pageNo: 1,
      },
      dataForm: {
        id: null,
        typeName: "",
        remark: "",
      },
      // 根据后端返回数据定义表格和分页的数据
      pageData: {
        data: [],
        pageNo: 1,
        pageSize: 5,
        totalCount: 0,
        totalPageCount: 1,
      },
      tableChecked: [],
      //定义添加\修改窗口是否显示变量
      dialogFormVisible: false,
      //input 宽度
      formLabelWidth: "120px",
      //定义选中的id数组
      selectedIds: [],
    };
  },
};
</script>
<style>
.mt-10 {
  margin-top: 10px;
}

.el-tooltip__popper {
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
